<template>
	<sw-common-frame>
		<el-tabs slot="tabs" class="custom_top" type="card" v-model="activeName">
			<el-tab-pane label="音视频处理" name="0"></el-tab-pane>
			<el-tab-pane label="AI处理" name="1"></el-tab-pane>
		</el-tabs>
	</sw-common-frame>
	<!-- <div class="sw_platform_settings">
		
		<el-form class="data_treating_form" size="small" v-show="activeName == 0">
			<el-form-item label="音视频转码">
				<el-switch v-model="formData.filed1" active-value="1" inactive-value="2"></el-switch>
				<div class="des">关闭后，新上传的视频将不转码，之前上传的视频不影响；开启后，新上传的视频将执行转码程序，不支持转码超过自身码率的视频</div>
				<div class="box" v-if="formData.filed1 === '1'">
					<h4>视频转码码率</h4>
					<el-radio-group v-model="transcodingData.bit">
						<el-radio label="500000">500000</el-radio>
						<el-radio label="800000">800000</el-radio>
						<el-radio label="1000000">1000000</el-radio>
						<el-radio label="2000000">2000000</el-radio>
					</el-radio-group>
					<h4>视频转码分辨率</h4>
					<el-checkbox-group v-model="transcodingData.pixList">
						<el-checkbox label="1280x720">720P 1280*720px</el-checkbox>
						<el-checkbox label="1920x1080">1080P 1920*1080px</el-checkbox>
						<el-checkbox label="2560x1440">2K 2560*1440px</el-checkbox>
						<el-checkbox label="3840x2160">4K 3840*2160px</el-checkbox>
						<el-checkbox label="7680x4320">8K 7680*4320px</el-checkbox>
					</el-checkbox-group>
					<h4>视频转码帧率</h4>
					<el-radio-group v-model="transcodingData.frequency">
						<el-radio :label="15">15</el-radio>
						<el-radio :label="20">20</el-radio>
						<el-radio :label="25">25</el-radio>
						<el-radio :label="30">30</el-radio>
						<el-radio :label="60">60</el-radio>
						<el-radio :label="75">75</el-radio>
					</el-radio-group>
					<p>静态画面建议低帧率，剧烈画面建议高帧率</p>
					<h4>视频转码分片时长（秒）</h4>
					<el-slider v-model="transcodingData.hlsTime" :marks="framesGapMarks"></el-slider>
					<p>分片越小播放加载越快，建议不超过50秒</p>
					<h4>大文件转码</h4>
					<el-switch v-model="formData.filed3" active-value="1" inactive-value="2"></el-switch>
					<p>是否转码大于2G视频</p>
				</div>
			</el-form-item>
			<el-form-item label="音视频打点截取">
				<el-switch v-model="formData.filed4" active-value="1" inactive-value="2"></el-switch>
				<div class="des">是否开启视频打点截取功能</div>
			</el-form-item>
			<el-form-item label="视频封面">
				<div class="inputbox">
					<el-input-number v-model="formData.filed5" :min="1" controls-position="right"></el-input-number>
					<span>秒</span>
				</div>
				<div class="des">选择截取视频第几秒作为视频封面</div>
			</el-form-item>
			<el-form-item label="视频截帧">
				<div class="inputbox">
					<el-input-number v-model="formData.filed6" :min="1" :max="100" controls-position="right"></el-input-number>
					<span>秒/帧</span>
				</div>
				<div class="des">以图搜视频、AI审核视频时截帧频率</div>
			</el-form-item>
		</el-form>
		<el-form class="data_treating_form" size="small" v-show="activeName === '1'">
			<el-form-item label="人脸识别">
				<el-switch v-model="formData.filed7" active-value="1" inactive-value="2"></el-switch>
				<div class="des">是否开启人脸识别，开启后可选择图片或视频</div>
				<div class="box" v-if="formData.filed7 === '1'">
					<h4>人脸识别范围</h4>
					<el-checkbox-group v-model="formData.filed8">
						<el-checkbox label="1">图片</el-checkbox>
						<el-checkbox label="2">视频</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-form-item>
			<el-form-item label="OCR文字识别">
				<el-switch v-model="formData.filed9" active-value="1" inactive-value="2"></el-switch>
				<div class="des">开启此功能后只对之后上传的图片（png、jpg）有效，启用OCR功能会增加系统CPU负载，请慎重开启，推荐使用独立的节点部署</div>
			</el-form-item>
			<el-form-item label="NLP文档智能标签">
				<el-switch v-model="formData.filed10" active-value="1" inactive-value="2"></el-switch>
				<div class="des">开启此功能后，将对PDF, TXT, WORD, EXCEL等文件进行智能标签提取</div>
			</el-form-item>
		</el-form>
		<div class="button">
			<el-button size="medium" type="primary" icon="iconfont icon-interactive-save" @click="handleUpdateSettings">保存配置</el-button>
		</div>
	</div> -->
</template>

<script>
import { mapGetters } from 'vuex';
import { updateConfig } from '@/api/system/tbSysConfig';
import { addTranscodeConfig, getAllTrans, updateTrans } from '@/api/platform/transcode';
export default {
	data() {
		return {
			activeName: '0',
			formData: {},
			transcodingData: {
				pixList: []
			},
			framesGapMarks: { 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 60: '60', 70: '70', 80: '80', 90: '90', 100: '100' }
		};
	},
	computed: {
		...mapGetters(['siteConfig'])
	},
	watch: {
		'formData.filed1': {
			handler(val) {
				if (val === '1') {
					this.getTranscodingConfig();
				}
			}
		}
	},
	mounted() {
		let info = this.siteConfig.find((item) => item.type === '3');
		let filed20Arr = !info.filed20 ? [] : info.filed20.split(',');
		this.formData = { ...info, filed8: filed20Arr };
	},
	methods: {
		//获取转码设置
		async getTranscodingConfig() {
			let result = await getAllTrans().then((res) => res.data);
			if (result.status === 200) {
				this.transcodingData = !result.data ? {} : result.data;
			}
		},

		//格式化参数
		formatParams(data) {
			let obj = { ...this.formData };
			obj['filed20'] = obj.filed8.join();
			delete obj.filed2;
			delete obj.filed8;
			return obj;
		},

		//添加转码配置
		async addTranscodingConfig() {
			let result = await addTranscodeConfig(this.transcodingData).then((res) => res.data);
			if (result.status === 200) {
			}
		},

		//更新转码配置
		async updateTranscodingConfig() {
			let result = await updateTrans(this.transcodingData).then((res) => res.data);
			if (result.status === 200) {
			}
		},

		//保存配置
		async handleUpdateSettings() {
			let params = this.formatParams();
			let result = await updateConfig(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				this.$message.success('保存成功');
				if (!!datas.id) {
					let index = this.$tbSysConfig.findIndex((item) => item.id === datas.id);
					this.$set(this.$tbSysConfig, index, datas);
				}
			}
			if (params.filed1 === '1') {
				Object.keys(this.transcodingData).length === 0 ? this.addTranscodingConfig() : this.updateTranscodingConfig();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.data_treating_form ::v-deep {
	flex: 1;
	overflow: auto;
	padding: 16px;
	.el-form-item__label {
		float: none;
		font-weight: bold;
	}
	h2 {
		font-size: 16px;
	}
	hr {
		margin: 0 0 20px;
		border: none;
		border-bottom: solid 1px #ccc;
	}
	.vertical {
		.el-radio {
			display: block;
			line-height: 24px;
			padding: 5px 0;
			p {
				color: #999;
				margin-left: 24px;
			}
		}
	}
	.inputbox {
		display: flex;
		align-items: center;
		.el-input {
			width: auto;
		}
		span {
			margin-left: 10px;
		}
	}
	.errconfig {
		display: flex;
		align-items: center;
		span {
			margin-right: 10px;
		}
		.el-input {
			margin-right: 10px;
		}
	}
	.des {
		color: #999;
		padding-top: 5px;
		line-height: 20px;
	}
	.box {
		padding: 10px 16px;
		margin-top: 10px;
		background-color: #f1f1f1;
		p {
			color: #999;
		}
		.el-checkbox {
			margin-left: 0;
		}
		.el-slider {
			margin: 0 20px 15px 5px;
		}
		.el-slider__button {
			width: 10px;
			height: 10px;
		}
		.el-slider__marks-text {
			line-height: 1;
		}
	}
}
</style>
